<template>
	<div class="list">
		<!-- 工具条 -->
		<el-col :span="24" class="toolbar">
			<el-button type="primary" @click="handleAdd">新建</el-button>
			<el-select v-model="filters.status" clearable placeholder="全部" @change="getTableData">
				<el-option label="正常" :value="1"></el-option>
				<el-option label="已删除" :value="0"></el-option>
			</el-select>
			<el-input placeholder="请输入内容" v-model="filters.username" class="search">
				<el-button slot="append" icon="el-icon-search" @click="getTableData"></el-button>
			</el-input>
		</el-col>
		<el-table :data="tableData" v-loading="listLoading" stripe @selection-change="selsChange" style="width: 100%">
			<!-- <el-table-column type="selection" width="55">
			</el-table-column> -->
			<el-table-column prop="uid" label="ID" width="50"></el-table-column>
			<el-table-column prop="username" label="用户名"></el-table-column>
			<el-table-column label="昵称">
				<template slot-scope="scope">
					{{scope.row.nickname?scope.row.nickname:''}}
				</template>
			</el-table-column>
			<el-table-column prop="right_id" label="权限"></el-table-column>
			<el-table-column prop="add_time" label="创建时间"></el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					{{scope.row.status == 0?'已删除':'正常'}}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template slot-scope="scope">
					<div v-if="scope.row.status == 0"></div>
					<div v-else>
						<span class="hover" @click="handleEdit(scope.$index, scope.row)">编辑</span>
						<span class="hover" @click="handleDel(scope.$index, scope.row)">删除</span>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<!-- 工具条 -->
		<el-col :span="24" class="toolbar" style="padding-top:10px">
			<!-- <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量密码重置</el-button> -->
			<el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		<!-- 新增 -->
		<el-dialog title="新建用户" :visible.sync="formAddVisible" width="500px">
			<el-form ref="formAdd" :model="formAdd" :rules="formAddRules" label-width="80px">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="formAdd.username"></el-input>
				</el-form-item>
				<el-form-item label="昵称" prop="nickname">
					<el-input v-model="formAdd.nickname"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="formAdd.password" type="password"></el-input>
				</el-form-item>
				<el-form-item label="权限" prop="right_id">
					<el-select v-model="formAdd.right_id" multiple placeholder="请选择" style="width: 100%">
						<el-option
							v-for="item in right_id"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitAdd('formAdd')">提交</el-button>
					<el-button @click="formAddVisible = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<!-- 编辑 -->
		<el-dialog title="编辑用户" :visible.sync="formEditVisible" width="500px">
			<el-form ref="formEdit" :model="formEdit" :rules="formEditRules" label-width="80px">
				<!-- <el-form-item label="用户名" prop="username">
					<el-input v-model="formEdit.username"></el-input>
				</el-form-item> -->
				<el-form-item label="昵称" prop="nickname">
					<el-input v-model="formEdit.nickname"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="formEdit.password" type="password"></el-input>
				</el-form-item>
				<el-form-item label="权限" prop="right_id">
					<el-select v-model="formEdit.right_id" multiple placeholder="请选择" style="width: 100%">
						<el-option
							v-for="item in right_id"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitEdit('formEdit')">提交</el-button>
					<el-button @click="formEditVisible = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import { userChangepw,userResetpw,userAdd,userEdit,userDel,userlist } from '@/api';

	export default {
		data() {
			return {
				// 翻页
				total: 0,
				page: 1,
				listLoading: false,
				sels: [],
				
				//以上是自己测试
				filters: {
					username: '',
					status: '',
				},

				// 表格
				tableData: [],
				// 添加弹出框
				formAddVisible: false,
				formAdd: {
					username: '',
					nickname: '',
					password: '',
					right_id: [],
				},
				formAddRules: {
					username: [{ required: true, message: '请填写用户名'}],
					nickname: [{ required: true, message: '请填写昵称'}],
					password: [{ required: true, message: '请填写密码'}],
					right_id: [{ required: true, message: '请选择用户权限'}],
				},
				right_id: [{
					value: 1,
					label: '用户管理'
				}, {
					value: 2,
					label: '版权监测管理'
				}, {
					value: 3,
					label: '盗版录入管理'
				}, {
					value: 4,
					label: '盗版下架管理'
				}, {
					value: 5,
					label: '用户盗版录入审核'
				}],

				// 编辑弹出框
				formEditVisible: false,
				formEdit: {
					// username: '',
					nickname: '',
					password: '',
					right_id: [],
				},
				formEditRules: {
					// username: [{ required: true, message: '请填写用户名'}],
					nickname: [{ required: true, message: '请填写昵称'}],
					// password: [{ required: true, message: '请填写密码'}],
					right_id: [{ required: true, message: '请选择用户权限'}],
				},
			}
		},
		mounted() {
			this.getTableData();
		},
		computed: {
			...mapState([
				'crocUser',
			]),
		},
		methods: {
			...mapMutations([
				'OUT_LOGIN',
			]),
			selsChange: function (sels) {
				this.sels = sels;
			},
			// 重置密码
			batchRemove: function () {
				var ids = this.sels.map(item => item.uid).toString();
				this.$confirm('确认重置选中记录密码吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = { 
						uid: this.crocUser.uid,
						ids: ids,
					};

					userResetpw(para).then((res) => {
						this.listLoading = false;
						if (res.data) {
							this.$message.success(res.msg);
						}else if(res.tologin) {
							this.OUT_LOGIN();
							this.$router.push('/login');
						}else {
							this.$message.error(res.msg);
						}
					});
				}).catch(() => {

				});
			},
			// 翻页 
			handleCurrentChange(val) {
				this.page = val;
				this.getTableData();
			},
			getTableData(){
				this.listLoading = true;
				let para = {
					status: this.filters.status,
					username: this.filters.username,
					uid: this.crocUser.uid,
					page: this.page,
					pagesize: 10,
				};

				userlist(para).then(res => {
					this.listLoading = false;
					if (res.data) {
						this.total = res.total;
						this.tableData = res.data;
					}else if(res.tologin) {
						this.OUT_LOGIN();
						this.$router.push('/login');
					}else {
						this.$message.error(res.msg);
					}
				});
			},

			// 删除
			handleDel(inde,row){
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = { 
						uid: this.crocUser.uid,
						id: row.uid,
						status: 0,
					};
					userEdit(para).then((res) => {
						this.listLoading = false;
		                if(res.data){
							this.$message.success(res.msg);
							this.getTableData();
		                }else if(res.tologin) {
							this.OUT_LOGIN();
							this.$router.push('/login');
						}else {
							this.$message.error(res.msg);
						}
					});
				}).catch(() => {

				});
			},
			// 显示添加
			handleAdd(index,row){
				this.formAddVisible = true;
			},

			// 提交添加
			submitAdd(formName){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let para = Object.assign({},this.formAdd);
						para.uid = this.crocUser.uid,
						userAdd(para).then(res => {
							if(res.data){
								this.$message.success(res.msg);
								this.resetForm(formName);
								this.formAddVisible = false;
								this.getTableData();
							}else if(res.tologin) {
								this.OUT_LOGIN();
								this.$router.push('/login');
							}else {
								this.$message.error(res.msg);
							}
						})

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		
			// 显示编辑
			async handleEdit(index,row){
				let rowCache = Object.assign({}, row);
				var dataStrArr=rowCache.right_id.split(",");//分割成字符串数组  
				var dataIntArr=[];//保存转换后的整型字符串  
				dataStrArr.forEach(function(data,index,arr){  
					dataIntArr.push(+data);  
				}); 
				rowCache.right_id = dataIntArr;

				this.formEdit = {
					uid: this.crocUser.uid,
					id: rowCache.uid,
					nickname: rowCache.nickname,
					password: '',
					right_id: dataIntArr,
				};
				this.formEditVisible = true; //显示编辑框
			},

			// 提交编辑
			submitEdit(formName){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let para = Object.assign({},this.formEdit);
						// console.log(para);
						// return
						userEdit(para).then(res => {
							if(res.data){
								this.$message.success(res.msg);
								this.resetForm(formName);
								this.formEditVisible = false;
								this.getTableData();
							}else if(res.tologin) {
								this.OUT_LOGIN();
								this.$router.push('/login');
							}else {
								this.$message.error(res.msg);
							}
						})

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			// 重置 
			resetForm(formName){
				this.$refs[formName].resetFields();
			},
		}
	}

</script>

<style scoped lang="scss">
</style>